// 基础颜色
$white: #ffffff;
$black: #000000;

// 主题颜色
$primary-color: #409eff;
$success-color: #67c23a;
$warning-color: #e6a23c;
$danger-color: #f56c6c;
$info-color: #909399;

// 文本颜色
$text-color-primary: #303133;
$text-color-regular: #606266;
$text-color-secondary: #909399;
$text-color-placeholder: #c0c4cc;

// 边框颜色
$border-color-base: #dcdfe6;
$border-color-light: #e4e7ed;
$border-color-lighter: #ebeef5;
$border-color-extra-light: #f2f6fc;

// 背景颜色
$background-color-base: #f5f7fa;
$background-color-light: #fafafa;

// 布局尺寸
$sidebar-width: 210px;
$sidebar-width-collapsed: 54px;
$header-height: 50px;
$tagsview-height: 34px;

// 侧边栏相关
$menu-bg: #304156;
$menu-text: #bfcbd9;
$menu-text-dark: #ffffff;
$menu-active-text: #409eff;
$menu-active-bg: rgba(0, 0, 0, 0.1);
$menu-hover-bg: rgba(255, 255, 255, 0.1);

// 子菜单
$sub-menu-bg: #1f2d3d;
$sub-menu-hover: #001528;

// Element Plus 变量覆盖
:export {
  menuBg: $menu-bg;
  menuText: $menu-text;
  menuActiveText: $menu-active-text;
  menuHover: $menu-hover-bg;
  subMenuBg: $sub-menu-bg;
  subMenuHover: $sub-menu-hover;
  sideBarWidth: $sidebar-width;
}

// 混合模式
@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

// 响应式混合
@mixin mobile {
  @media (max-width: 768px) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: 769px) and (max-width: 1024px) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: 1025px) {
    @content;
  }
}

// 动画
@mixin transition($property: all, $duration: 0.3s, $timing: ease) {
  transition: $property $duration $timing;
}

// 阴影
@mixin box-shadow($x: 0, $y: 2px, $blur: 4px, $spread: 0, $color: rgba(0, 0, 0, 0.1)) {
  box-shadow: $x $y $blur $spread $color;
}

// 文本省略
@mixin ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin ellipsis-multi($lines: 2) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
}